<template>
	<div>
		<div class="container">
			<div class="handle-box">
				<el-select v-model="query.type" @change="handleSearch(query.case_number,query.type)" clearable placeholder="证据类型" class="handle-select mr10">
					<el-option key="1" label="门头照" value="门头照"></el-option>
					<el-option key="2" label="执法证照片" value="执法证照片"></el-option>
          <el-option key="3" label="卷烟原始位置照片" value="卷烟原始位置照片"></el-option>
          <el-option key="4" label="指认照片" value="指认照片"></el-option>
          <el-option key="5" label="经营许可证照片" value="经营许可证照片"></el-option>
          <el-option key="6" label="签字照片" value="签字照片"></el-option>
          <el-option key="7" label="其他" value="其他"></el-option>
				</el-select>
				<el-input v-model="query.case_number" placeholder="案件号" @change="handleSearch(query.case_number,query.type)" class="handle-input mr10"></el-input>
				<el-button type="primary" :icon="Search" @click="handleSearch(query.case_number,query.type)">搜索</el-button>
				<el-button type="primary" :icon="Plus" @click="start_create">新增</el-button>
			</div>
			<el-table :data="tableList" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="case_number" label="案件号"  align="center"></el-table-column>
        <el-table-column prop="type" label="证据类型" align="center"></el-table-column>
				<el-table-column label="证据照片" align="center">
					<template #default="scope">
						<el-image
							class="table-td-thumb"
							:src="scope.row.img"
							:z-index="10"
							:preview-src-list="[scope.row.img]"
							preview-teleported
						>
						</el-image>
					</template>
				</el-table-column>
<!--				<el-table-column label="操作" width="500" align="center">-->
<!--					<template #default="scope">-->
<!--						<el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="15">-->
<!--							修改-->
<!--						</el-button>-->
<!--						<el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index)" v-permiss="16">-->
<!--							删除-->
<!--						</el-button>-->
<!--					</template>-->
<!--				</el-table-column>-->
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog title="新增图片" v-model="createVisible" width="30%">
			<el-form label-width="150px">
        <el-form-item label="案件号">
          <el-input v-model="img_form_data.case_number"></el-input>
        </el-form-item>
				<el-form-item label="证据类型">
					<el-input v-model="img_form_data.type"></el-input>
				</el-form-item>
        <el-form-item label="备注">
          <el-input v-model="img_form_data.remark"></el-input>
        </el-form-item>
        <el-form-item label="点击上传证据照片" >
          <el-upload class="upload-demo"
                     action="#"
                     :limit=2
                     list-type="picture-card"
                     :on-change="handleChange"
                     :on-remove="handleRemove"
                     :on-preview="true"
                     :auto-upload="false"
                     :on-progress="true"
                     accept="bmp, jpg, png, gif, jpeg"
                     :show-file-list="true" >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          </el-upload>
        </el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="createVisible = false">取 消</el-button>
					<el-button type="primary" @click="upload_create()">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import {fetchData, fetchData_s_mongodb_evidence_Cre, fetchData_s_mongodb_evidence_Views} from '../api/index';

interface TableItem {
	name: string;
  case_number: string;
  type: string;
  remark: string;
  img: string;
}
const img_form_data = reactive({
  case_number: '',
  type: '',
  name:'',
  content:'',
  remark:'',
});

const img = [];
const handleChange = (file) =>{
  img.push(file);
}
const handleRemove = (file) =>{
  img.forEach(function (item,index,arr){
    if (item.name == file.name){
      img.splice(index,1)
    }
  })
}
const createVisible = ref(false);
const start_create = () =>{
  createVisible.value = true
}

const upload_create = () =>{

  var form = new FormData();
  form.append('format',img[0].raw.type)
  form.append("file",img[0].raw)
  form.append("name","证据照")
  form.append("case_number",img_form_data.case_number)
  form.append("type",img_form_data.type)
  fetchData_s_mongodb_evidence_Cre(form).then(res=>{
    if (res.data.message === "success"){
      ElMessage.success('添加成功');
      createVisible.value = false;
      getData();
    }else {
      ElMessageBox.confirm('添加失败', '提示', {
        type: 'warning'
      })
    }
  });
}

const query = reactive({
  case_number:'',
	type: '',
  pageIndex: 1,
  pageSize: 10
});
const tableData = ref<TableItem[]>([]);
const tableList = ref<TableItem[]>([]); // 用于存放分页数据的列表
const pageTotal = ref(0);
// 获取表格数据
const getData = (case_number:string='',type:string='') => {
  fetchData_s_mongodb_evidence_Views(case_number,type).then(res => {
		tableData.value = res.data.data;
    tableList.value = [];
    pageTotal.value = tableData.value.length;
    // 根据页码确定下标位置
    const index: number = query.pageIndex * query.pageSize - query.pageSize;
    for (let i = index; i < index + query.pageSize; i++) {
      // 防止数组下标越界
      if (i <= tableData.value.length - 1) {
        tableList.value.push(tableData.value[i])
      } else {
        // 越界就不再循环
        break;
      }
    }
	});
};
getData('','');

// 查询操作
const handleSearch = (case_number:string='',type:string='') => {
	getData(case_number,type);
};
// 分页导航
const handlePageChange = (val: number) => {
  query.pageIndex = val;
  getData();
};

</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #ff0000;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
